<!-- 虫情识别 -->
<template>
    <div id="iframe-container">
      <!-- <Title class="title">
            <template #title>
                虫情测报
            </template>
        </Title> -->
        <div class="img">
        <!-- <iframe :src="src" scrolling="auto" frameborder="0" id="iframe"></iframe> -->
        <van-uploader v-model="fileList" multiple :max-count="1" preview-size="400" />
    </div>
    <div class="butt">
      <van-button type="primary" size="normal" @click="jump()">开始识别</van-button>
    </div>
  </div>
  <ul  class="showMsg" v-show="showMsg">
    <ol>虫害类型：{{Pest.name}}</ol>
    <ol>置信度：{{Pest.num}}</ol>
    </ul>
  </template>
  
  <script>
  import { ref } from 'vue';
  export default {
      name:'photos',
    //   data(){
    //       return {
    //           src:"https://zgf.scwhnk.com/AgriInfo/AgriImg/SC510101suiling6.php?LampId=SC510101suiling6"
    //       }
    //   },
    setup() {
    const fileList = ref([
      // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
      // // Uploader 根据文件后缀来判断是否为图片文件
      // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      // { url: 'https://cloud-image', isImage: true },
    ]);
    return {
      fileList,
    };
  },
  // 显示信息
  data() {
    return {
      // 上传的图片
      showMsg: false,
      // 默认的图片
      Pest:{
          name:'稻飞虱',
          num:'98%',
      },
      
    };
  },
  methods:{
    jump() {
      this.showMsg = !this.showMsg;
      console.log(this.showMsg);
    },
  }
  }
  </script>
  
  <style lang="less" scoped>
  #iframe{
      width:100%;
      height:200vh;
  }
 
#iframe-container {
    .console {
        width: 80%;
        margin: 0 auto;
        padding-top: 1rem;
    }
}
.img{
  margin-left: 150px;
  margin-top: 100px;
}
.butt{
  margin-left: 300px;
}
.showMsg{
    margin-left: 300px;
    font-size: 20px;
    color: blacks;
}
@media screen and (max-width: 821px) {
#iframe-container{
    font-size: calc(100vw * 30 / 1920);

}

}
  </style>


 